<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>带看房源选择</title>
    <script src="../../../res/js/jquery-3.4.1.min.js"></script>
    <script src="../../../res/layui/layui.js" charset="utf-8"></script>
    <script src="../../../res/js/Tools.js"></script>
    <link rel="stylesheet" href="../../../res/layui/css/layui.css" media="all">
    <link href="../../../res/echarts/eleTree.css" rel="stylesheet"/>
    <script src="../../../res/echarts/eleTree.js"></script>
    <script src="../../../res/js/login_common.js" charset="utf-8"></script>
    <style type="text/css">
        body {
            padding: 10px;
        }
    </style>
</head>
<body>
<form class="layui-form" action="">
    <input type="hidden" name="clientId" id="clientId"/>
    <input type="hidden" name="guideId" id="guideId"/>
    <div class="layui-form-item">
        <label class="layui-form-label">选择房源</label>
        <div class="layui-input-block">
            <select id="house" name="houseId" lay-verify="required" lay-search="">
                <option value="">直接选择或搜索选择</option>
                <option value="1">layer</option>
                <option value="2">form</option>
                <option value="3">layim</option>
                <option value="4">element</option>
                <option value="5">laytpl</option>
                <option value="6">upload</option>
                <option value="7">laydate</option>
                <option value="8">laypage</option>
                <option value="9">flow</option>
                <option value="10">util</option>
                <option value="11">code</option>
                <option value="12">tree</option>
                <option value="13">layedit</option>
                <option value="14">nav</option>
                <option value="15">tab</option>
                <option value="16">table</option>
                <option value="17">select</option>
                <option value="18">checkbox</option>
                <option value="19">switch</option>
                <option value="20">radio</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">带看描述：</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入内容" class="layui-textarea" id="guideName" name="guideName"></textarea>
        </div>
        <!--<div class="layui-input-block">
            <textarea id="guideName" name="guideName" lay-verify="conten" style="display: none;"></textarea>
        </div>-->
    </div>

    <div>
        <!--<div>
            <div>
                <a class="layui-btn layui-btn-danger">删除</a>
            </div>
            <img src="../../res/images/20200618213725.png"/>
            <input name="file" type="hidden"/>
        </div>-->
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="imgs">图片上传</button>
        </div>
        <fieldset class="layui-elem-field">
            <legend>房源图片</legend>
            <div id="houseImg">
                <!--<div style="border: #0C0C0C 2px solid;height: 200px;width: 200px;float: left;margin: 10px">
                    <a href="javascript:deleteImg(0)">
                        <span class="layui-badge">X</span>
                    </a>
                    <a href="javascript:deleteImg(0)">
                        <div style="margin-top: -18px;height: 200px;width:200px;background-image: url('../../res/images/20200618213725.png');background-size:100% 100%;">

                        </div>
                    </a>
                </div>
                <div style="border: #0C0C0C 2px solid;height: 200px;width: 200px;float: left;margin: 10px">
                    <a href="javascript:deleteImg(0)">
                        <span class="layui-badge">X</span>
                    </a>
                    <a href="javascript:deleteImg(0)">
                        <div style="margin-top: -18px;height: 200px;width:200px;background-image: url('../../res/images/20200618213725.png');background-size:100% 100%;">

                        </div>
                    </a>
                </div>-->
                <!--<div>

                </div>
                <img src="../../res/images/20200618213725.png"/>
                <input name="file" type="hidden"/>
                <hr>-->
            </div>
        </fieldset>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
        </div>
    </div>
</form>
<script>
    var clientId = getQueryString("clientId");
    var guideId = getQueryString("guideId");
    layui.use(['form', 'layedit', 'laydate', 'layer','upload'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate
            , upload = layui.upload;


        $("#clientId").val(clientId);

        var url = "../../../houseAction/selectAll";
        $.ajaxSettings.async = false;
        $.post(url, null, function (obj) {
            $("#house").html("<option value=''>直接选择或搜索选择</option>");
            $.each(obj, function (index, item) {
                $("#house").append('<option value="' + item.houseId + '">' + item.userName + '-' + item.sectorName + '-' + item.houseArea + '㎡-' + item.housePrice + '￥</option>')
            });
            form.render();
        }, "json");

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#imgs'
            , url: '../../../clientAction/uploadNew' //改成您自己的上传接口
            , done: function (res) {
                //如果上传失败
                /*if (res.code > 0) {
                    return layer.msg('上传失败');
                }*/
                var num = Math.floor(Math.random() * 10 + 1);
                $("#houseImg").append('<div id="' + num + '" style="border: #0C0C0C 2px solid;height: 200px;width: 200px;float: left;margin: 10px"><a href="javascript:deleteImg(\''+num+'\')"><span class="layui-badge">X</span></a><a href="javascript:imgShow(\'' + res.data.src + '\')"><div style="margin-top: -18px;height: 200px;width:200px;background-image: url(\'' + res.data.src + '\');background-size:100% 100%;"></div></a><input type="hidden" name="clientImg" value="'+res.data.src+'" /></div>');
                //上传成功
                /*var url = "../../guideAction/addImg";
                var data = {imgUrl: res.data.src, guideId: $("#guideId").val()};
                $.post(url, data, function (objs) {
                    if (objs > 0) {
                        //查询关联图片
                        var url = "../../guideAction/findGuideImgAll";
                        var data = {id: $("#guideId").val()};
                        $.post(url, data, function (objz) {
                            $("#houseImg").html("");
                            $.each(objz, function (index, item) {

                            })
                        }, "json");
                    } else {
                        //演示失败状态，并实现重传
                        var demoText = $('#demoText');
                        demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                        demoText.find('.demo-reload').on('click', function () {
                            uploadInst.upload();
                        });
                    }

                }, "json");*/
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });

        //监听提交
        form.on('submit(demo1)', function (data) {
            var selectArr = $("input[name=clientImg]");
            var imgs = [];
            $.each(selectArr, function (index, item) {
                imgs.push(item.value);
            });
            data.field.imgs = imgs;
            var url="../../../guideAction/addGuideHouse";
            $.post(url,data.field,function (obj) {
                if(obj>0){
                    window.parent.location.reload();//刷新父页面
                }else{
                    layer.msg("新增失败",{type:2});
                }
            },"json");

            /*layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            });*/
            return false;
        });

        if(guideId){
            $("#guideId").val(guideId);
            var url="../../../guideAction/findById";
            $.ajaxSettings.async = false;
            var data={guideId:guideId};
            $.post(url,data,function (obj) {
                $("#house").val(obj.houseId);
                $("#guideName").val(obj.guideName);
                $.each(obj.guideImgs,function (index,item) {
                    $("#houseImg").append('<div id="' + item.imgId + '" style="border: #0C0C0C 2px solid;height: 200px;width: 200px;float: left;margin: 10px"><a href="javascript:deleteImg(\''+item.imgId+'\')"><span class="layui-badge">X</span></a><a href="javascript:imgShow(\'' + item.imgUrl + '\')"><div style="margin-top: -18px;height: 200px;width:200px;background-image: url(\'' + item.imgUrl + '\');background-size:100% 100%;"></div></a><input type="hidden" name="clientImg" value="'+item.imgUrl+'" /></div>');
                });
                form.render();
            },"json")
        }

        form.render();
    });

    function deleteImg(imgId) {
        //询问框
        layer.confirm('是否删除', {
            icon: 0,
            btn: ['是', '否'] //按钮
        }, function () {
            $("#" + imgId + "").remove();
            layer.msg('删除成功', {icon: 1});

            /*var url = "../../guideAction/deleteImg";
            var data = {id: imgId};
            $.post(url, data, function (obj) {
                if (obj > 0) {

                } else {
                    layer.msg("删除失败", {icon: 2});
                }
            }, "json");*/
        }, function () {

        });

    }

    function imgShow(url) {
        layer.open({
            type: 1,
            skin: 'layui-layer-rim', //加上边框
            area: ['1080px', '90%'], //宽高
            content: '<img src="' + url + '" width="1080px" />'
        });
        /*layer.open({
            type: 1,
            title: false,
            closeBtn: 0,
            area: ['auto'],
            skin: 'layui-layer-nobg', //没有背景色
            shadeClose: true,
            content: '<div><img src="\'+url+\'" width="800px" height="800px" /></div>'
        });*/
    }
</script>
</body>
</html>